<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" height="800" width="1000">
    <!--创建剪切-->
    <!--<defs>-->
        <!--<clipPath id="cut-off-bottom">-->
            <!--&lt;!&ndash;矩形剪切 和矩形重合部分展示出来，其余不展示&ndash;&gt;-->
            <!--<rect x="0" y="0" width="200" height="150"></rect>-->
        <!--</clipPath>-->
    <!--</defs>-->
    <!--<circle cx="100" cy="100" r="100" fill="blue" clip-path="url(#cut-off-bottom)"></circle>-->

    <!---------------------------------------------->
    <!--遮罩-->
    <defs>
        <linearGradient id="Gradient">
            <stop offset="0" stop-color="green"></stop>
            <stop offset="1" stop-color="red"></stop>
        </linearGradient>
        <mask id="Mask">
            <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"></rect>
        </mask>
    </defs>
    <!--<rect x="0" y="0" width="200" height="200" fill="green"></rect>-->
    <rect x="0" y="0" width="200" height="200" fill="blue" mask="url(#Mask)"></rect>
</svg>
</body>
</html>
